<template>
  <div id="main" style="height: 500px"></div>
</template>
<script>
import * as echarts from "echarts";
import { onMounted } from "vue";
import $ from "jquery";
export default {
  setup() {
    onMounted(() => {
      var ROOT_PATH =
        "https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples";
      var app = {};

      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      myChart.showLoading();
      let projection;
      $.when(
        $.get(ROOT_PATH + "/data/asset/geo/world.json"),
        $.getScript("https://cdn.jsdelivr.net/npm/d3-array"),
        $.getScript("https://cdn.jsdelivr.net/npm/d3-geo")
      ).done(function (res) {
        myChart.hideLoading();
        // Add graticule
        const graticuleLineStrings = [];
        for (let lat = -80; lat <= 80; lat += 10) {
          graticuleLineStrings.push(createLineString([-180, lat], [180, lat]));
        }
        for (let lng = -180; lng <= 180; lng += 10) {
          graticuleLineStrings.push(createLineString([lng, -80], [lng, 80]));
        }
        res[0].features.unshift({
          geometry: {
            type: "MultiLineString",
            coordinates: graticuleLineStrings,
          },
          properties: {
            name: "graticule",
          },
        });
        echarts.registerMap("world", res[0]);
        projection = d3.geoOrthographic();
        option = {
          geo: {
            map: "world",
            projection: {
              project: (pt) => projection(pt),
              unproject: (pt) => projection.invert(pt),
              stream: projection.stream,
            },
            itemStyle: {
              borderColor: "#333",
              borderWidth: 1,
              borderJoin: "round",
              color: "#000",
            },
            emphasis: {
              label: {
                show: false,
              },
              itemStyle: {
                color: "skyblue",
              },
            },
            regions: [
              {
                name: "graticule",
                itemStyle: {
                  borderColor: "#bbb",
                },
                emphasis: {
                  disabled: true,
                },
              },
            ],
          },
        };
        myChart.setOption(option);
      });
      app.config = {
        rotateX:90,
        rotateY: 0,
        onChange() {
          projection &&
            projection.rotate([app.config.rotateX, app.config.rotateY]);
          myChart.setOption({
            geo: {},
          });
        },
      };
      app.configParameters = {
        rotateX: {
          min: -180,
          max: 180,
        },
        rotateY: {
          min: -80,
          max: 80,
        },
      };
      function createLineString(start, end) {
        const dx = end[0] - start[0];
        const dy = end[1] - start[1];
        const segs = 50;
        const stepX = dx / segs;
        const stepY = dy / segs;
        const points = [];
        // TODO needs adaptive sampling on the -180 / 180 of azimuthal projections.
        for (let i = 0; i <= segs; i++) {
          points.push([start[0] + i * stepX, start[1] + i * stepY]);
        }
        return points;
      }

      option && myChart.setOption(option);
    });
  },
};
</script>
